 <template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
     <comment-item @click-reply="$emit('click-reply',$event)"
      v-for="(item,index) in list" 
      :key="index" 
      :comment="item"></comment-item>
    </van-list>
    <!-- 评论列表 -->

    <!-- 发布评论 -->
    <!-- <van-cell-group class="publish-wrap">
      <van-field clearable placeholder="请输入评论内容">
        <van-button slot="button" size="mini" type="info">发布</van-button>
      </van-field>
    </van-cell-group> -->
    <!-- /发布评论 -->
  </div>
</template>

<script>
import { getComments } from '@/api/comment'
import  commentItem  from './comment-item'
  export default {
    name: "CommentList",
    components:{commentItem},
    props: {
        // 文章ID或者评论ID
        sourceId:{
            type:[Number,String,Object],
            required:true
        },
        // 评论列表
        list:{
          type:Array,
          default(){
            return []
          }
        },
        type:{
          type:String,
          default:'a',
          validate(val){
            return ['a','c'].includes(val)
          }
        }
    },
    created(){
      // 主动触发load事件，文章长van-list不在可视区不触发
      // 主动调用一次
      this.loading=true
      this.onLoad()
    },
    data() {
      return {
        // list: [], // 评论列表
        loading: false, // 上拉加载更多的 loading
        finished: false, // 是否加载结束
        offset:null,  // 页码数
        limit:10  // 每页数量
      };
    },
    methods: {
      async onLoad() {
        try {
            // 1.请求数据
            const { data:res} = await getComments({
                type:this.type,  // a表示获取文章评论， c表示获取评论回复
                // 关于大数字ID，我们建议都要执行toString方法，防止后代校验类型
                source:this.sourceId.toString(), // 文章ID或者评论id
                offset:this.offset ? this.offset.toString() : this.offset,  // 偏移量
                limit:this.limit  // 每页数量
            })
            // 2.追加数据
            this.list.push(...res.data.results)
            // 将评论总数传递给父组件
            this.$emit('updateTotalCommentNum',res.data.total_count)

            // 3.关闭加载
            this.loading = false
            // 4.判断是否结束
            if(res.data.results.length<this.limit){
                // 没有数据了
                this.finished = true
            }else{
                // 下一页的开始位置，最后一个评论的ID
                this.offset = res.data.last_id

            }
        } catch (error) {
            console.log(error)
        }
      }
    }
  };
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .van-list {
    margin-bottom: 45px;
  }
</style>